<template>
<!--  新增编辑资讯列表-->
  <div class="positionR">
    <div class="padding15 minMaxWidth600 marginAuto">
      <el-divider id="info" content-position="center">常规信息</el-divider>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="文章标题" prop="name">
          <el-input :disabled="disabled" class="width100" v-model="ruleForm.name" placeholder="请输入文章标题"></el-input>
        </el-form-item>
       
        <el-form-item label="所属栏目" prop="phone">
          <el-select style="width: 100%;" v-model="ruleForm.name" placeholder="请选择">
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="TAG标签" prop="checkList">
          <el-checkbox-group v-model="ruleForm.checkList">
            <el-checkbox label="头条"></el-checkbox>
            <el-checkbox label="推荐"></el-checkbox>
            <el-checkbox label="加粗"></el-checkbox>
            <el-checkbox label="跳转"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="文章内容" prop="phone" id="seo">
          <!-- <el-input class="width100" v-model="ruleForm.phone" placeholder="请输入会员备注"></el-input> -->
          <TEditor @editInput="editInput" :value="ruleForm.content"></TEditor>
        </el-form-item>
        <el-divider id="seo" content-position="center">SEO</el-divider>
        <el-form-item label="SEO标题" prop="name">
          <el-input :disabled="disabled" class="width100" v-model="ruleForm.name" placeholder="请输入SEO标题"></el-input>
        </el-form-item>
        <el-form-item label="SEO关键字" prop="name">
          <el-input :disabled="disabled" class="width100" v-model="ruleForm.name" placeholder="请输入SEO关键字"></el-input>
        </el-form-item>
        <el-form-item label="SEO描述" prop="name">
          <el-input :disabled="disabled"   type="textarea"
          :rows="2" class="width100" v-model="ruleForm.name" placeholder="请输入SEO描述"></el-input>
        </el-form-item>
        <el-form-item label="说明文档" prop="phone">
          <el-upload
              class="upload-demo"
              :action="actionUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <el-divider id="other" content-position="center">其他设置</el-divider>
        <el-form-item label="作者" prop="name">
          <el-input :disabled="disabled" class="width100" v-model="ruleForm.name" placeholder="请输入作者"></el-input>
        </el-form-item>
         
        <el-form-item label="阅读权限" prop="name">
          <el-select style="width: 100%;" v-model="ruleForm.name" placeholder="请选择">
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="浏览量" prop="name">
          <el-input-number style="width: 100%;" v-model="ruleForm.name"  :min="1"  label="描述文字"></el-input-number>
        </el-form-item>

        <el-form-item label="排序" prop="date">
          <el-date-picker
             style="width: 100%;"
              v-model="ruleForm.date"
              type="date"
              placeholder="发布时间">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="排序" prop="name">
          <el-input :disabled="disabled" type="number" class="width100" v-model="ruleForm.name" placeholder="请输入排序"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="isLoading" :submitDisbled="submitDisbled" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="goback">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
//  import {} from '@/assets/api/api'
import {AddEditmixin} from '@/assets/mixins/addEditmixin'
  export default {
    name:'AddEditRealTimeInfo',
    mixins: [AddEditmixin],
    components:{
      UploadImg:()=>import('@/components/uploadImg.vue'),
      TEditor:()=>import('@/components/TEditor.vue'),
    },
    data(){
      return{
        options:[{name:'请选择',id:''}],
        actionUrl:'',
        fileList:[{name:'1',url:''}],
        goBackPath:'/realTimeInfo/realTimeInfoList',//返回的路径
          isLoading:false,
        page:this.$route.query.page?this.$route.query.page:1,
        submitDisbled:false,
          infoName:'',//编辑取得名字查重要
        msg1:'新增账号',
          roleName:'',//角色名称
        ruleForm:{
          content:"1",
          name: "",
          date:new Date(),
          phone: "",
          checkList:[],
          expireDate:new Date().getTime(),
          roleId:'',
        
        },
        disabled:false,
        rules: {
          name: [
            { required: true, message: '请输入账号名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入正确手机号', trigger: 'blur' },
          ],
          roleId: [
            { required: true, message: '请选择会员等级', trigger: 'change' },
          ]
        },
        products:[],
        organizations:[],
        roles:[],
      }
    },
    created() {
     
        
      },
    methods:{
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      editInput(v){//富文本
          this.objData.content = v;
        },
      callbackUrl(url){//图片的上传地址
           console.log(url,'callbackUrl')
      },
     
      submitForm(formName) {
        let that = this;
        that.isLoading = true;
      
        this.$refs[formName].validate((valid) => {
          if (valid) {
        
            that.isLoading = false;
          } else {
            that.isLoading = false;
            return false;
          }
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
   ::v-deep .el-upload--text{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
</style>
